<template>
  <el-dialog v-bind="$attrs" v-on="$listeners">
    <el-form
      :model="params"
      :rules="managerRules"
      ref="form"
      label-width="100px"
      size="mini"
    >
      <el-form-item label="用户名:" prop="manager_name">
        <el-input v-model="params.manager_name"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="manager_password">
        <el-input
          type="password"
          v-model="params.manager_password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="真实姓名:" prop="manager_realname">
        <el-input v-model="params.manager_realname"></el-input>
      </el-form-item>
      <el-form-item label="联系电话:" prop="manager_phone">
        <el-input v-model="params.manager_phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱地址:" prop="manager_email">
        <el-input v-model="params.manager_email"></el-input>
      </el-form-item>
      <el-form-item label="用户状态:" prop="manager_status">
        <el-select clearable v-model="params.manager_status">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button size="mini" @click="change()">取消</el-button>
      <el-button type="primary" size="mini" @click="confirm()">添加</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { insertNewManager } from "@/api/manager";

export default {
  data() {
    return {
      managerRules: {
        manager_name: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        manager_password: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ],
        manager_realname: [
          { required: true, message: "请输入真实姓名", trigger: "blur" }
        ],
        manager_phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" }
        ],
        manager_email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" }
        ],
        manager_status: [
          { required: true, message: "请选择用户状态", trigger: "change" }
        ]
      },
      params: {
        manager_name: "",
        manager_password: "",
        manager_realname: "",
        manager_phone: "",
        manager_email: "",
        manager_status: "1"
      }
    };
  },
  methods: {
    change() {
      this.$emit("update:visible", false);
    },
    async confirm() {
      await this.$refs.form.validate();
      await insertNewManager(this.params);
      this.$emit("reload");
      this.$emit("update:visible", false);
      this.params = {
        manager_name: "",
        manager_password: "",
        manager_realname: "",
        manager_phone: "",
        manager_email: "",
        manager_status: "1"
      };
    }
  }
};
</script>